import React, { useState } from "react";
import { delShops } from "../../services/shops";
import { findById } from "../../services/shops";
import Img from "../../components/shops/Img";
import { setupdate, fetchShops, setShop } from "../../store/slices/shopsSlice";
import { useDispatch } from "react-redux";
import { Modal, Table, Space, Button, Card, Image } from "antd";
const { confirm } = Modal;
const { Column } = Table;

// 得到学生并解构
export default function List({ show, shop, pagination, typeShop }) {
  let dispatch = useDispatch();
  // 图片框
  const [isModalVisible, setIsModalVisible] = useState(false);

  // 分页
  const onChange = ({ current, pageSize }) => {
    show({ current, pageSize });
  };
  const [img, setImage] = useState([]);
  //   删除
  // 得到id发送请求，得到数据在渲染表格 show
  const delBtn = (id) => {
    console.log(id);
    confirm({
      title: "你确定要删除吗？",
      okText: "确定",
      okType: "danger",
      cancelText: "取消",
      async onOk() {
        console.log("确定");
        await delShops(id);
        show();
      },
      onCancel() {
        console.log("取消");
      },
    });
  };

  // 修改表格的
  const updateBtn = async (id) => {
    console.log(id);
    let { data } = await findById(id);
    console.log(data, 'list');
    //  setPeople(data)
    dispatch(setShop(data));
    dispatch(setupdate(true));
  };
  const handleImg = (img) => {
    console.log(img.shopImg, "img");
    setImage(img);
    setIsModalVisible(true);
  };
  const handleOk = async () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <Card style={{ marginTop: "20px" }}>
      <Table
        rowKey="_id"
        dataSource={shop}
        style={{ marginTop: 20 }}
        pagination={pagination}
        onChange={onChange}
      >
        <Column title="商品名" dataIndex="name" key="name" />
        <Column
          title="分类名"
          render={(text, record) => (
            <Space size="middle">
              <div>{record.types.typeName}</div>
            </Space>
          )}
          key="typeName"
        />
        <Column title="价格" dataIndex="price" key="price" />
        <Column title="数量" dataIndex="total" key="total" />
        <Column
          title="商品图片"
          key="shopImg"
          style={{ width: "200px" }}
          render={(text, record) => (
            <Space size="middle">
              <Button
                type="primary"
                onClick={() => handleImg(record)}
              // onClick={() => {
              //   console.log('aaaaswswswsw');
              //   setIsModalVisible(true);
              // }}
              >
                查看图片
              </Button>
              {/* <Image
                width={200}
                style={{
                  display: "none",
                }}
                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
                preview={{
                  isModalVisible,
                  src: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                  onVisibleChange: (value) => {
                    console.log(value,'wewrdfghg');
                    setIsModalVisible(true);
                  },
                }}
              /> */}
            </Space>
          )}
        ></Column>
        <Column
          title="是否上架"
          render={(text, record) => (
            <Space size="middle">
              <div>{record.isStatus}</div>
            </Space>
          )}
          key="isStatus"
        />
        <Column
          title="操作"
          key="action"
          // record 每次循环处理的学生信息
          render={(text, record) => (
            <Space size="middle">
              <Button type="primary" onClick={() => updateBtn(text._id)}>
                修改
              </Button>
              <Button type="primary" danger onClick={() => delBtn(text._id)}>
                {" "}
                删除
              </Button>
            </Space>
          )}
        />
      </Table>

      {img.shopImg ? (
        <Modal
          title="商品图片"
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          {img.shopImg.map((item, i) =>
            <Image
              style={{
                width: "200px ",
                marginRight: "20px",
                flexWrap: 'wrap'
              }}
              src={img.shopImg[i] ? "http://localhost:3001" + '/images/' + img.shopImg[i] : '/public/logo192.png'}></Image>)}
        </Modal>
      ) : (
        <div></div>
      )}
    </Card>
  );
}
